<template>
<el-tabs type="border-card" style="height:auto">
    <el-tab-pane label="已有预约">

      <el-descriptions v-for="(item,index) in havedReservation" :key="index"
    class="margin-top"
    :title="index+1"
    :column="3"
    border
  >
    <template #extra>
      <br>
      <el-button @click="cancelReservation(item.reserve_number,index)" type="primary">取消预约</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <user />
          </el-icon>
          预约老师姓名
        </div>
      </template>
      {{ item.teacher_name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <iphone />
          </el-icon>
          开始时间
        </div>
      </template>
      {{ item.start_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <location />
          </el-icon>
          地点
        </div>
      </template>
      {{ item.place }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <tickets />
          </el-icon>
          结束时间
        </div>
      </template>
      {{ item.end_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building />
          </el-icon>
          老师留言/预约目的
        </div>
      </template>
     {{ item.purpose }}
    </el-descriptions-item>
  </el-descriptions>
    </el-tab-pane>

    <el-tab-pane label="未处理的预约">
      <el-descriptions  v-for="(item,index) in untreatReservation" :key="index"
    class="margin-top"
    :title="index+1"
    :column="3"
    border
  >
    <template #extra>
      <br>
      <el-button type="primary" @click="withdrawReservation(item.reserve_number,index)" >撤回预约</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <user />
          </el-icon>
          预约老师姓名
        </div>
      </template>
      {{ item.teacher_name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <iphone />
          </el-icon>
          开始时间
        </div>
      </template>
      {{ item.start_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <location />
          </el-icon>
          地点
        </div>
      </template>
      {{ item.place }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <tickets />
          </el-icon>
          结束时间
        </div>
      </template>
      {{ item.end_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building />
          </el-icon>
          老师留言/预约目的
        </div>
      </template>
     {{ item.purpose }}
    </el-descriptions-item>
  </el-descriptions>


    </el-tab-pane>
    <el-tab-pane label="驳回的预约">
      <el-descriptions  v-for="(item,index) in rejectReservation" :key="index"
    class="margin-top"
    :title="index+1"
    :column="3"
    border
  >
    <template #extra>
      <br>
      <!-- <el-button type="primary" >联系老师</el-button> -->
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <user />
          </el-icon>
          预约老师姓名
        </div>
      </template>
      {{ item.teacher_name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <iphone />
          </el-icon>
          开始时间
        </div>
      </template>
      {{ item.start_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <location />
          </el-icon>
          地点
        </div>
      </template>
      {{ item.place }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <tickets />
          </el-icon>
          结束时间
        </div>
      </template>
      {{ item.end_time }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon>
            <office-building />
          </el-icon>
          老师留言
        </div>
      </template>
     {{ item.purpose }}
    </el-descriptions-item>
  </el-descriptions>


    </el-tab-pane>
    <el-tab-pane label="发起预约" class="container">
    <div class="row justify-content-md-center">
      <div v-if="isShowList" class="col p-0">
        <div class="d-flex justify-content-center"><h3>老师列表</h3></div>
        <ul class="list-group list-group-horizontal text-center">
          <li class="list-group-item" style="width: 14%;">姓名</li>
          <li class="list-group-item" style="width: 12%;">性别</li>
          <li class="list-group-item" style="width: 22%;">学院</li>
          <li class="list-group-item" style="width: 20%;">系别</li>
          <li class="list-group-item" style="width: 23%;">电话号码</li>
          <li class="list-group-item px-0" style="width: 4%;">选</li>
        </ul>
        <ul class="list-group list-group-horizontal text-center" v-for="(item,index) in teachers" :key="index">
          <li class="list-group-item" style="width: 14%;">{{ item.teacher_name }}</li>
          <li class="list-group-item" style="width: 12%;">{{ item.teacher_sex }}</li>
          <li class="list-group-item" style="width: 22%;">{{ item.college }}</li>
          <li class="list-group-item" style="width: 20%;">{{ item.department }}</li>
          <li class="list-group-item" style="width: 23%;">{{ item.phone }}</li>
          <li class="list-group-item px-1 py-3" style="width: 4%;">
            <input type="radio" @click="inputTeacherID(item.teacher_id)" class="list-group-item">
          </li>
        </ul>
      </div>
      <el-form  label-width="auto" style="max-width: 600px" class="col border pt-3">
    <el-form-item label="预约老师姓名">
      <el-input @blur="showTeacherList()" v-model="conservation.teacher_name" />
    </el-form-item>
    <el-form-item label="开始时间">
      <el-col :span="11">
        <el-date-picker
          v-model="startTime.first"
          value-format="YYYY/MM/DD"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="startTime.second"
          value-format="HH:mm:ss"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>

    <el-form-item label="结束时间">
      <el-col :span="11">
        <el-date-picker
          v-model="endTime.first"
          value-format="YYYY/MM/DD"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="endTime.second"
          value-format="HH:mm:ss"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="预约地点">
      <el-input v-model="conservation.place" />
    </el-form-item>
    <el-form-item label="预约目的">
      <el-input v-model="conservation.purpose" type="textarea" />
    </el-form-item>
    <el-form-item class="d-flex flex-column">
      <el-button type="primary" @click="onSubmit">预约</el-button>
      <el-button @click="isShowList=false">取消</el-button>
    </el-form-item>
  </el-form>
</div>

    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { computed, reactive,ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage,ElMessageBox } from 'element-plus'
import moment from 'moment';

//获取路由传递过来的student_id
const route=useRoute()
const router=useRouter()
let isShowList=ref(false)
let isSelect=ref(false)
let student_id=route.query.student_id
let startTime=reactive({
  first:"",
  second:""
})

let endTime=reactive({
  first:"",
  second:""
})
const conservation = reactive({
  reserve_number:"",
  student_id:student_id,
  teacher_id:"",
  initiation_time:"",
  state:"",
  start_time:computed(()=>{
    return startTime.first+" "+startTime.second
  }),
  end_time:computed(()=>{
    return endTime.first+" "+endTime.second
  }),
  purpose:"",
  place:"",
  teacher_name:"",
  student_name:""
})
//axios获取该学生的所有预约信息
const getAllReservatoin=async()=>{
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/getAllReservationByStudentID",
    params:{
      student_id:student_id
    }
  })
  return result.data 
}
let allReservation=await getAllReservatoin()
let havedReservation=ref([])
let untreatReservation=ref([])
let rejectReservation=ref([])

function getReservation(){
  for(let i=0;i<allReservation.length;i++){
  if(allReservation[i].state=='已通过'){
    havedReservation.value.push(allReservation[i])
  }
  else if(allReservation[i].state=='已驳回'){
    rejectReservation.value.push(allReservation[i])
  }
  else{
    untreatReservation.value.push(allReservation[i])
  }
}
}
getReservation()
let teachers=ref([])
//发送预约之前先查看是否有同名的老师
async function getTeacherID(teacher_name){
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/getTeacherByName",
    params:{
      teacher_name:teacher_name
    }
  })
  return result.data
}

function inputTeacherID(teacher_id){
  isSelect.value=true
  conservation.teacher_id=teacher_id
}
async function showTeacherList(){
  teachers.value=await getTeacherID(conservation.teacher_name)
  console.log(teachers.value.length)
  if(teachers.value.length){
    isShowList.value=true
  }else{
    ElMessage({
    message: '未查到符合条件的老师，请重新输入',
    type: 'warning',
  })
  } 
}
 //向后端发送请求，新建一个预约
const onSubmit =async() => {
  if(conservation.teacher_name && conservation.end_time && conservation.start_time && conservation.place && conservation.purpose)
  {
    let notTime=moment().format('YYYY-MM-DD HH:mm:ss')
    if(!moment(conservation.start_time).isBefore(conservation.end_time) || !moment(conservation.start_time).isAfter(notTime)){
      ElMessage({
        message:'时间选择有误！',
        type:"error"
      })
      return false
    }
    if(isSelect.value){
    let isSuccess=await axios.post("http://localhost:8080/createReservation",conservation)
    if(isSuccess){
      //预约建立成功
      ElMessage({
      message: '预约提交成功',
      type: 'success',
    })
    // 重新加载界面
    setTimeout(() => {
      location.reload()
    }, 1000);
    }
  }else{
    ElMessage({
    message: '请选择老师',
    type: 'warning',
  })
  }
  }else{
    ElMessage({
    message: '请完善信息后提交',
    type: 'warning',
  })
  }
 
}
//传入预约编号，根据预约编号删除指定的预约
async function deleteReservation(reserve_number){
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/deleteReservation",
    params:{
      reserve_number:reserve_number
    }
  })
  return result.data
}
//取消一条预约
function cancelReservation(reserve_number,index){
  //首先给老师发送消息，待老师同意后，该条预约才可以被删除
  ElMessageBox.confirm(
    '是否确定取消该次预约?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      let result=deleteReservation(reserve_number)
      console.log(reserve_number)
      if(result){
      ElMessage({
        type: 'success',
        message: '取消预约成功',
      })}
    //将数组中的index序号的预约去除
    havedReservation.value.splice(index,1)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '没有取消本次预约',
      })
    })
}
//撤回一条预约
function withdrawReservation(reserve_number,index){
  //询问是否撤回此次预约
  ElMessageBox.confirm(
    '是否确定撤回该次预约?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      let result=deleteReservation(reserve_number)
      console.log(reserve_number)
      if(result){
      ElMessage({
        type: 'success',
        message: '撤回预约成功',
      })}
    //将数组中的index序号的预约去除
    untreatReservation.value.splice(index,1)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '没有撤回本次预约',
      })
    })
}
</script>
<style scoped>

</style>